<template>
  <div class="col-md-9 box">
    <div class="top col-md-12">
      <div class="top_title col-md-12">
        <div class="list col-md-2">&nbsp;&nbsp;账户管理</div>
      </div>
      <div class="col-md-12 top_bottom">
        <!-- //左边列表 -->
        <div class="top_bottom_left col-md-3">
          <p>UID</p>
          <p v-for="(item,i) in plists" :key="i">{{item.name}}</p>
        </div>
        <!-- 右边列表 -->
        <div class="top_bottom_right col-md-9">
          <P>11111111</P>
          <P>
            13462012349
            <!-- 手机弹出框 -->
            <changePhone></changePhone>
          </P>
          <P>
            未绑定
            <!-- 邮箱弹出框 -->
            <changeEmail></changeEmail>
          </P>
          <P>
            12345678
            <!-- 密码弹出框 -->
            <changePwsd></changePwsd>
          </P>
          <P>
            3LXmykmzogkbgfghwnqbsca
            <!-- 地址弹出框 -->
            <changeAddress></changeAddress>
          </P>
        </div>
      </div>
    </div>
    <div class="bottom col-md-12">
      <div class="bottom_title col-md-12">
        <div class="list col-md-2">&nbsp;&nbsp;到期提醒</div>
      </div>
      <div class="col-md-12 bottom_bottom">
        <!-- //左边列表 -->
        <div class="bottom_bottom_left col-md-9">
          <p v-for="(item,i) in paylists" :key="i">{{item.name}}</p>
        </div>
        <!-- 右边列表 -->
        <div class="bottom_bottom_right col-md-3">
          <p class="email">
            <el-radio v-model="radio" label="1">邮件</el-radio>
          </p>
          <p>
            <el-switch v-model="value1" active-color="#171c61" inactive-color="#ccc"></el-switch>
          </p>
          <p>
            <el-switch v-model="value2" active-color="#171c61" inactive-color="#ccc"></el-switch>
          </p>
          <p>
            <el-switch v-model="value3" active-color="#171c61" inactive-color="#ccc"></el-switch>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import changeAddress from "../change/changeAddress.vue";
import changePhone from "../change/changePhone.vue";
import changeEmail from "../change/changeEmail.vue";
import changePwsd from "../change/changePswd.vue";
export default {
  data() {
    return {
      form: {
        name: ""
      },
      formLabelWidth: "120px",
      //邮件选择器
      radio: "1",
      value1: true,
      value2: true,
      value3: true,
      activeName: "first",
      //账户管理左
      plists: [
        {
          name: "手机绑定"
        },
        {
          name: "邮箱绑定"
        },
        {
          name: "登录密码"
        },
        {
          name: "收币地址"
        }
      ],
      //到期提醒左
      paylists: [
        {
          name: "提醒类型"
        },
        {
          name: "套餐到期前7天提醒我"
        },
        {
          name: "套餐到期前一天提醒我"
        },
        {
          name: "订单失效后提醒我"
        }
      ]
    };
  },
  components: {
    changeAddress,
    changePhone,
    changeEmail,
    changePwsd
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.box {
  background-color: #fff;
  padding: 36px 59px 45px 45px;
  overflow: hidden;
  .top,
  .bottom {
    font-size: 22px;
    margin-bottom: 45px;
    .top_title,
    .bottom_title {
      border-bottom: 1px solid rgba(210, 210, 210, 1);
      margin-bottom: 43px;
      color: rgba(23, 28, 97, 1);
      .list {
        border-bottom: 1px solid #171c61;
        padding-bottom: 6px !important;
        padding: 0;
      }
    }
    .top_bottom,
    .bottom_bottom {
      text-align: center;
      background: rgba(238, 238, 238, 1);
      border-radius: 5px;
      padding: 0;
      p,
      a {
        display: block;
        border-bottom: 1px solid #fff;
        margin-bottom: 0;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        font-weight: 300;
      }
      /deep/a {
        cursor: pointer;
      }
      .top_bottom_left,
      .top_bottom_right,
      .bottom_bottom_left,
      .bottom_bottom_right {
        padding: 0;
      }
      .top_bottom_right {
        border-left: 1px solid #fff;
        text-align: left;
        .el-dialog {
          width: 45%;
        }

        /deep/.el-input__inner {
          background-color: rgba(238, 238, 238, 1);
        }
        p {
          padding-left: 70px;
          .el-button {
            float: right;
            margin: 20px 30px 0 0;
            background: #171c61;
            color: #fff;
          }
        }
      }
    }
    //不同点
    .bottom_bottom {
      text-align: left;
      .bottom_bottom_left {
        p {
          padding-left: 55px;
        }
      }
      .bottom_bottom_right {
        .email {
          /deep/.el-radio__label {
            font-size: 18px;
            font-weight: 300;
            color: rgba(0, 0, 0, 1);
          }
        }
      }
    }
  }
}
</style>
